<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>科幻电影</title>
    <style type="text/css">
        .background {
            width: 100%;
            height: 1000px;
            background-color: #030303;
        }

        .title {
            margin-left: 700px;
            color: aliceblue;
        }

        .row {
            width: 1300px;
            height: 250px;
            margin-left: 100px;
            display: flex;
            flex-direction: row;
            margin-top: 50px;

        }

        .box1 {
            width: 200px;
            height: 100%;
            display: flex;
            flex-direction: column;
            margin-left: 40px;

        }

        .img {
            width: 200px;
            height: 200px;
            margin-top: 10px;
        }

        .img_attribute {
            width: 200px;
            height: 200px;
            border-radius: 5px;
        }

        .text {
            width: 200px;
            height: 10px;
            color: beige;
            margin-top: 2px;
            margin-left: 55px;
        }

        .button {
            width: 100px;
            height: 30px;
            border-radius: 10px;
        }

        .box_inside {
            display: flex;
            flex-direction: row;
            width: 200px;
            height: 30px;
        }

        .tabcollect {
            width: 30px;
            height: 30px;
            margin-left: 50px;

        }

        .img_collection {
            width: 30px;
            height: 30px;
            border-radius: 50px;
        }
    </style>
</head>
<body>
<div class="background">
    <h1 class="title">科幻电影</h1>

    <div id="group">

    </div>
</div>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script>
    // $.ajax({
    //     url: "app/list",
    //     data: {},
    //     method: "POST",
    //     success: res => {
    //
    //     }, error: res => {
    //     }
    // })
    function  sc(event) {
        let text = $(this).parent().prev().text()
        console.log(text)
        $.ajax({
            url: 'collection/add',
            data: {
                "id": event
            },
            success: res => {
                alert("操作成功")
                location.reload()
            },
            error: res => {
                alert("收藏失败")
            }
        })
    }

    // 收藏
    // $('.box_inside .tabcollect').click(sc())
    // 下载
    $('.box_inside button').click(event => {
        let text = $(this).parent().prev().text()
        $.ajax({
            url: 'file/download',
            data: {
                "name": text
            },
            success: res => {
                alert("下载成功")
            },
            error: res => {
                alert("下载失败")
            }
        })
    })

    function ss() {
        $('#group').html('')

        $.ajax({
            url: 'app/list',
            data: {
                "name": $('#key').val(),
                "type":1
            },
            success: res => {
                if (res.length < 1) {
                    $('#group').innerHTML('当前分类: 无应用')
                }
                let html = `<div class="row">`;
                for (let i = 0; i < res.length; i++) {
                    let r = res[i]
                    if (i > 0 && i % 5 == 0) {
                        html += `</div><div class="row">`
                    }
                    html += `
                        <div class="box1">
                            <div class="img"><img src="${r.img}" class="img_attribute"/></div>
                            <h3 class="text">${r.name}</h3>
                            <div class="box_inside">
                                <a href="file/download?name=${r.name}&img=${r.img}"  download="images/img-16.png">
                                <button type="button" class="button">下载观看</button></a>
                                <div class="tabcollect" onclick="sc(${r.id})"><img src="${r.collect ? "images/a.png":"https://img-blog.csdnimg.cn/e8eb83b0a09d4c2dab5cc9aa454101ce.png"}" class="img_collection"></div>
                            </div>
                        </div>`;

                }
                $('#group').append(html + `</div>`)
            },
            error: res => {
                $('#group').innerHTML('当前分类无应用')
            }
        })
    }
    ss()
</script>
</body>
</html>
